<template>
	<view class="ct-list">
		<view class="ct-item u-border-one-one" v-for="(v,i) in value" :key="i">
			<view>
				<view class="u-flex-center-sba">
				<view class="u-flex">
						<image class="avatarImage" v-if="v.head_photo":src="v.head_photo"></image>
					<image class="avatarImage" v-else :src="imgUrl+'/head-on.png'"></image>
					<view class="avatar-start" >
						<view class="u-text-width">{{v.nickname || '惠选中亿平台会员'}}</view>
						<view class="comment-start">
							<!-- <uni-rate :max="5" :value="v.level" size="17" readonly="true" color="#B3B3B3" allowHalf='true' margin="4"  activeColor="#FF5112" style="margin: 20rpx 0;" /> -->
							<text v-for="(item,index) in 5" 
							:key="index" class="iconfont2" 
							:class="v.level >=item?'grade-active':'u-B3B3B3'" 
							style="font-size: 35rpx;margin-right: 11.5rpx;">&#xe60f;</text>
						</view>
					</view>
				</view>
				<view class="time">{{v.create_time}}</view>
			</view>
			<view class="commentView">
				<view class="commentContent">{{v.content}}</view>
				<view class="u-mt15 ctImg">
					<image class="u-ctImg180" v-for="(imgItem,index) in dealImg(v.img)" :key="index" :src="imgItem"></image>
				</view>
			</view>
			</view>
			<view v-if="v.reply_list&&v.reply_list.length>0">
				<view class="ml100">
				<view class="u-font28 u-999">商家回复：{{v.reply_list[0].content}}</view>
			</view>
			</view>
		</view>
		<view v-if="value.length==0">
			<view class="no-data">
				<image :src="imgUrl+'/nodata.png'"></image>
				<div>暂无评价~</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				gradeNum: 3,
				imgUrl: this.$mConfig.staticUrl
			}
		},
		methods:{
			dealImg(v){
				let result =[];
				if(v){
					result=v.split(",");
				}
				return result;
			}
		}

	}
</script>

<style lang="scss">
	.u-flex-center-sba{
		display: flex;
		flex-direction: row;
		// align-items: center;
		justify-content: space-between;
	}
	.avatar-start {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.comment-start {
		// margin-top: 20rpx;
	}
	.time {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 27rpx;
	}
	.ml100 {
		margin-left: 100rpx;
	}

	.pd40 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.ctImg image:not(:nth-child(3n)) {
		margin-right: 10rpx;
	}

	.grade-active {
		color: #FF211F;
	}

	.u-B3B3B3 {
		color: #e6e6e6;
	}

	.no-data {
		text-align: center;
		padding: 20rpx 0;
		color: #999999;
	}

	.no-data image {
		width: 430rpx;
		height: 278rpx;
	}
	.ct-list{
		width: 712rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		padding:19rpx;
		margin:19rpx;
		
		
	}
	.avatarImage{
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;
		margin-right: 19rpx;
	}
	.u-text-width{
		height: 27rpx;
		margin-bottom: 13rpx;
		line-height: 27rpx;
	}
	.commentView{
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 27rpx;
	}
	.commentContent{
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 27rpx;
		margin-top: 13rpx;
		margin-left: 96rpx;
	}
</style>
